<template>
	<mainHeader title="年度账单" :haveBack="true" goto="back">
		<yearSelectorVue :baseTime="theYear" @overYearChoose="overYearChoose">
			<view class="mainStatistics_top">
				{{theYear}}年
			</view>
		</yearSelectorVue>
	</mainHeader>
	<scroll-view scroll-y class="header_scroll">
		<view class="statistics">
			<view class="statistics_line base_box">
				<lineOneVue :data="theYearData" />
			</view>
			<view class="statistics_list index_list_box base_box">
				<view class="statistics_list_title">
					<view class="statistics_list_title_one" v-for="item in listTitle">
						{{item}}
					</view>
				</view>
				<view class="statistics_list_one" v-for="item in 12" v-if="Object.keys(theYearShowList).length>0">
					<view class="statistics_list_one_one oneLine" v-for="one in Object.keys(theYearShowList)"
						:class="theYearShowList[one][item-1]=='0'?'statistics_list_one_none':''">
						{{theYearShowList[one][item-1]}}
					</view>
				</view>
				<noneTextVue title="暂无信息" v-else />
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import noneTextVue from "@/components/base/noneText.vue";
	import lineOneVue from "@/components/lineOne.vue"
	import mainHeaderVue from '@/components/mainHeader.vue';
	import yearSelectorVue from '@/components/yearSelector.vue';
	import {
		computed,
		ref
	} from 'vue'
	import {
		handleLoad,
	} from "@/uitls/tool.js"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import store from '@/store/index.js';
	const allData = computed(() => store.state.mainData.allData)
	const theYear = ref((new Date).getFullYear())
	onLoad((e) => {
		if (Object.keys(e).length === 0 || e.time === void 0) {
			handleLoad("查看年度统计出错");
			return;
		}
		theYear.value = e.time
		getTheYearData()
	})
	const overYearChoose = (x) => {
		theYear.value = x
		getTheYearData()
	}
	const theYearData = ref()
	const theYearShowList = ref({})
	const getTheYearData = () => { // 获得 图表 数据
		const categories = Array.from({
			length: 12
		}, (_, i) => (i + 1).toString() + "月");
		console.log("categories",categories)
		let data = new Array(12).fill(0);
		let incomeList = new Array(12).fill(0);
		let expensesList = new Array(12).fill(0);
		
		Object.keys(allData.value).forEach((item) => { // 有数据的
			let date = new Date(item);
			if (!isNaN(date) && date.getFullYear() == theYear.value) {
				let index = new Date(item).getMonth()
				for (let one of allData.value[item]) {
					if (one.showClass == 0) {
						expensesList[index] += parseFloat(one.addValue)
						data[index] -= parseFloat(one.addValue)
					} else {
						incomeList[index] += parseFloat(one.addValue)
						data[index] += parseFloat(one.addValue)
					}
				}
			}
		})

		let series = {
			name: store.state.setting.MoneySymbol,
			data: data
		}
		theYearData.value = {
			categories,
			series: [series]
		}
		theYearShowList.value = {
			time: categories,
			income: incomeList,
			expenses: expensesList,
			total: data
		}
		console.log("theYearShowList",theYearShowList.value)
	}
	const listTitle = ['日期', '收入', '支出', '结余']
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.mainStatistics_top {
		font-weight: bold;
	}

	.statistics {
		.statistics_line {
			width: 100%;
			aspect-ratio: 3/2;
		}

		.statistics_list {
			&_title,
			&_one {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&_one {
					flex: 1;
					text-align: center;
				}
			}

			&_title {
				border-bottom: $baseBorder;
				padding-bottom: 0.2em;

				&_one {
					font-size: $bigFontsize !important;
					font-weight: bold;
				}
			}

			&_one {
				margin: 0.5em 0;

				&_one {}

				&_none {
					opacity: 0.5;
				}
			}
		}
	}
</style>